import React, { useState } from 'react';
import RecommendPage from './RecommendPage';
import RandomPage from './RandomPage';
import SettingsPage from './SettingsPage';
import CustomTabBar from './CustomTabBar';
import './TabLayout.css';

const TabLayout = () => {
  const [activeTab, setActiveTab] = useState('recommend');

  const renderContent = () => {
    switch (activeTab) {
      case 'recommend':
        return <RecommendPage />
      case 'random':
        return <RandomPage />
      case 'settings':
        return <SettingsPage />
      default:
        return <RecommendPage />
    }
  };

  return (
    <div className="tab-layout">
      <div className="content-container">
        {renderContent()}
      </div>
      <CustomTabBar activeTab={activeTab} onChange={setActiveTab} />
    </div>
  );
};

export default TabLayout;